<template>
	<scroll-view id="myScroll" class="vip-list" scroll-y :style="{flex: 1,'overflow-y': 'hidden',background:bg}" @scroll='scroll'
		:scroll-top="scrollTop" enhanced="true" lower-threshold="50" @scrolltolower="onScrollToLower"
		@scrolltoupper='scrolltoupper' :refresher-enabled="true" refresher-threshold="80" refresher-default-style="none"
		:refresher-triggered="triggered" :refresher-two-level-pinned="true" :refresher-two-level-scroll-enabled="true"
		:refresher-two-level-enabled='twoLevel' :refresher-two-level-threshold="150"
		:refresher-two-level-triggered="twoLevelTriggered" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
		@refresherrestore="onRestore" @refresherabort="onAbort" @refresherstatuschange='onStatusChange'>
		<!-- refresher-two-level-pinned即将打开二级是否定住 -->
		<!-- refresher-two-level-enabled开启二级能力 -->
		<!-- @refresherrefresh自定义下拉刷新被触发 -->
		<!-- @refresherrestore自定义下拉刷新被复位 -->
		<!-- @refresherabort自定义下拉刷新被中止 -->
		<!-- @refresherstatuschange下拉刷新状态回调 -->

		
		<view slot="refresher" class=" w-100">
			<view class=" w-100 justify-center">
				<view class="justify-center flex-row">
					<bs-load></bs-load>
				</view>
				<view class="justify-center flex-row">{{refreshStatus}}</view>
			</view>
		</view>
		<slot></slot>
		<!-- 加载中提示 -->
		<!-- <view class="loading" v-if="loading">
			<text class="loading-text">加载中...</text>
		</view> -->

		<!-- 没有更多数据提示 -->
		<!-- <view class="no-more" v-if="noMore && !loading">
			<text>没有更多内容了</text>
		</view> -->
	</scroll-view>
</template>

<script>
	export default {
		name: "bs-scroll",
		props:{
			load:{
				type:Boolean,
				default:false,
			},
			// 关闭二级
			twoLevel:{
				type:Boolean,
				default:false,
			},
			// 关闭二级
			bg:{
				type:String,
				default:'#FFFFFF00',
			}
		},
		watch:{
			load(val){
				this.loading = val
			}
		},
		data() {
			return {
				refreshStatus: '下拉刷新',
				status: 0,
				// triggered
				twoLevelTriggered: false, //设置打开/关闭二级
				triggered: false, //true触发下拉刷新
				scrollTop: 0,
				// 加载状态
				loading: false,
				// 是否还有更多数据
				noMore: false
			};
		},
		mounted() {
			this._freshing = false
			// this.twoLevelTriggered = true
		},
		methods: {
			buildText(status) {
				switch (status) {
					case 0:
						return '下拉刷新'
					case 1:
						return `松手刷新${this.twoLevel?",下拉进入二楼":''}`
					case 2:
						return '正在刷新'
					case 3:
						return '刷新成功'
					case 4:
						return '刷新失败'
					case 5:
						return '松手进入二楼'
					default:
						return '进入二楼,点击返回'
				}
			},
			// onPulling自定义下拉刷新控件被下拉
			onStatusChange(e) {
				const status = e.detail.status
				console.log('status', status);
				this.status = status
				this.refreshStatus = this.buildText(status)
				if (status == 7) {
					wx.reLaunch({
						url: '/pages/index/index',
						routeType: 'wx://zoom'
					})
				}

			},
			onPulling(e) {
				// console.log('onPulling:', e)
			},

			onRefresh() {
				console.info('@@@ onRefresh')
				if (this._freshing) return
				this._freshing = true
				this.triggered = true
				console.log('_freshing', this);
				setTimeout(() => {
					this.triggered = false
					this._freshing = false
					console.log('_freshing', this);
				}, 2000)
			},

			onRestore(e) {
				console.log('onRestore:', e)
			},

			onAbort(e) {
				console.log('onAbort', e)
			},

			scroll(e) {
				// console.log('e',e);
			},
			onScrollToLower() {
				console.log('到底');
				if (this.loading) return
				this.loading = true;
				this.$emit('onScrollToLower')

			},
			scrolltoupper(e) {
				console.log('顶', 1);
			},
		}
	}
</script>

<style>

</style>